<template>
    <el-button type="primary" @click="handleAdd">新增字典</el-button>

    <el-table style="width:1000px" :data="tableData" stripe >
        <el-table-column prop="itemCode" label="字典项"/>
        <el-table-column prop="valueCode" label="字典值" />
        <el-table-column prop="valueName" label="字典名" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-popconfirm title="您确定要删除么?" confirm-button-text="确认" cancel-button-text="取消" 
                @confirm="handleDelete(scope.row)">
                    <template #reference>
                        <el-button round type="danger" >删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogAddVisible" title="新增字典">
        <el-form ref="addFormRef" :model="addForm" :rules="rules" class="demo-ruleForm" status-icon>
            <el-form-item label="字典项" prop="itemCode">
                <el-input v-model="addForm.itemCode" placeholder="请输入字典项" />
            </el-form-item>
            <el-form-item label="字典值" prop="valueCode">
                <el-input v-model="addForm.valueCode" placeholder="请输入字典值，若多个请以,隔开" />
            </el-form-item>
            <el-form-item label="字典名" prop="valueName">
                <el-input v-model="addForm.valueName" placeholder="请输入字典名，若多个请以,隔开" />
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleAddDict">确认</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
    </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import axios from 'axios';
onMounted(() => {
    getList()
})

// 表格数据
const tableData = ref([]);

const getList = async()=>{
    var res = await axios.get(`/knowledge/dict/getListByItemCode`);
    if(res.data.code===200){
        tableData.value = res.data.data;
    }else{
        ElMessage.error(res.data.msg)
    }
}

// 添加字典对话框
const dialogAddVisible = ref(false);

const handleAdd = ()=>{
    dialogAddVisible.value = true;
}

// 添加字典表单
const addFormRef = ref();
const addForm = reactive({
    itemCode: "",
    valueCode: "",
    valueName: ""
})

const rules = reactive({
    itemCode: [
        { required: true, message: '请输入字典项', trigger: 'blur' }
    ],
    valueCode: [
        { required: true, message: '请输入字典值', trigger: 'blur' }
    ],
    valueName: [
        { required: true, message: '请输入字典名', trigger: 'blur' }
    ]
})

// 添加字典 取消按钮事件
const cancel = ()=>{
    dialogAddVisible.value = false;
    addForm.itemCode = "";
    addForm.valueCode = "";
    addForm.valueName = "";
        
}

// 添加字典 确认按钮事件
const handleAddDict = async ()=>{
    var res = await axios.post(`/knowledge/dict/add`,{
        itemCode:addForm.itemCode,
        valueCodeList:addForm.valueCode.split(','),
        valueNameList:addForm.valueName.split(',')
    })
    if(res.data.code===200){
        ElMessage.success("操作成功");
        dialogAddVisible.value = false;
        addForm.itemCode = "";
        addForm.valueCode = "";
        addForm.valueName = "";
    }else{
        ElMessage.error(res.data.msg);
    }
}

// 删除字典值事件
const handleDelete = async(item)=>{
    var res = await axios.delete(`/knowledge/dict/${item.id}`);
    if(res.data.code===200){
        ElMessage.success("执行成功")
        getList();
    }else{
        ElMessage.error(res.data.msg)
    }
}

</script>